<template>
  <div class="container">
    <a-table :columns="columns" :data-source="data" :pagination="false" class="table">
        <template  slot="edit" slot-scope="text,record">
       <a @click="edit(record)">{{ text }}</a>
        </template>
    </a-table>
    <a-modal v-model="dialogVisible" title="编辑" @ok="handleOk">
      <a-form v-bind="formItemLayout" :form="form">
        <a-form-item label="字段名称">
          <a-input placeholder="请输入字段名称" v-model="form.name"></a-input>
        </a-form-item>
        <a-form-item label="字段类型" >
          <a-select
            :default-value="form.typeValue"
            v-model="form.typeValue"
            @change="dateSelectChange"
            :disabled="true"
          >
            <a-select-option value="单行文本"> 单行文本 </a-select-option>
            <a-select-option value="日期"> 日期 </a-select-option>
            <a-select-option value="单拉下选"> 单拉下选 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否必填">
          <a-radio-group v-model="form.requireValue" @change="requireChange">
            <a-radio :style="radioStyle" value="是"> 是 </a-radio>
            <a-radio :style="radioStyle" value="否"> 否 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="日期类型" v-if="form.typeValue=='日期'">
          <a-radio-group v-model="form.dateTypeValue" @change="dateTypeChange">
            <a-radio :style="radioStyle" value="年-月"> 年-月 </a-radio>
            <a-radio :style="radioStyle" value="年-月-日"> 年-月-日 </a-radio>
            <a-radio :style="radioStyle" value="年-月-日时-分"> 年-月-日时-分 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="选项" v-if="form.typeValue=='单拉下选'">
          <a-row>
            <a-col :span="8">
              <a-input v-for="(item,i) of form.input" :default-value="item" style="width: 200px" :key="i" v-model="form.input[i]"></a-input>
            </a-col>
            <a-col :span="3" :offset="8">
                <a-row>
              <a-button type="primary" @click="add"> 添加 </a-button>
                </a-row>
                <a-row>
              <a-button type="primary" @click="del"> 删除 </a-button>
                </a-row>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
        // 对话框内信息 保存
        form:{
            key:"",
            name:'',
            dateTypeValue:'',
            requireValue:'',
            typeValue:'',
            input:[]
        },
        // 多选样式
         radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 14 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
        dialogVisible:false,
      data: [
        {
          key: "1",
          name: "字段一",
          type: "单行文本",
          require: "是",
          option: "无",
          edit: "编辑",
        },
        {
          key: "2",
          name: "字段二",
          type: "日期",
          require: "否",
          option: "年-月-日",
          edit: "编辑",
        },
        {
          key: "3",
          name: "字段三",
          type: "单拉下选",
          require: "否",
          option: "选项一、选项二",
          edit: "编辑",
        },
      ],
      columns: [
        {
          title: "字段名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "字段类型",
          dataIndex: "type",
          key: "type",
        },
        {
          title: "是否必填",
          dataIndex: "require",
          key: "require",
        },
        {
          title: "字段选项",
          dataIndex: "option",
          key: "option",
        },
        {
          title: "操作",
          dataIndex: "edit",
          key: "edit",
          scopedSlots: { customRender: "edit" },
        },
      ],
    };
  },
  methods: {
      del(){
          this.form.input.pop()
      },
      add(){
          this.form.input.push('')
      },
      edit(row){
          console.log(row)
          this.form.key=row.key
          this.form.name=row.name
          this.form.requireValue=row.require
          this.form.typeValue=row.type
          if(row.type=="日期"){
              this.form.dateTypeValue=row.option
          }else{
              this.form.input=row.option.split('、')
          }
          this.dialogVisible=!this.dialogVisible
      },
      handleOk(){
          console.log(this.form)
          if(this.form.typeValue=='单拉下选'){
              this.form.dateTypeValue=this.form.input.join('、')
          }else if(this.form.typeValue=="单行文本"){
              this.form.dateTypeValue="无"
          }
          let row=this.data[this.form.key-1]
          row.key=this.form.key
          row.name=this.form.name
          row.require=this.form.requireValue
          row.type=this.form.typeValue
          row.option=this.form.dateTypeValue
          this.dialogVisible=!this.dialogVisible
          this.form={
              key:"",
            name:'',
            dateTypeValue:'',
            requireValue:'',
            typeValue:'',
            input:[]
          }
      },
      dateSelectChange(){},
      dateTypeChange(){},
      requireChange(){}
  },
};
</script>
<style scoped>
.container {
  margin-top: 40px;
  width: 60%;
}
.table{
    width:800px
}
</style>